CSS konteineripäringu pikkusühikud: elemendipõhise arvutuse meisterlik kasutamine globaalses disainis

Pidevalt arenevas veebidisaini maailmas on tõeliselt adaptiivsete ja reageerivate kasutajaliideste saavutamine alati olnud esmatähtis eesmärk. Kuigi vaateakna ühikud nagu vw ja vh on meid aastakümneid hästi teeninud, seovad need stiilid otse brauseri aknaga. See lähenemine võib olla piirav, kui elemendid peavad kohanema omaenda konteineri ruumi, mitte terve vaateakna alusel. Siin tulevad mängu CSS-i konteineripäringud – revolutsiooniline funktsioon, mis võimaldab arendajatel stiliseerida komponente nende vanemkonteineri mõõtmete põhjal. Selle võimekuse oluline osa peitub uues elemendipõhiste pikkusühikute komplektis: cqw, cqh, cqi ja cqb. See põhjalik juhend süveneb nendesse ühikutesse, selgitades nende arvutamist, praktilisi rakendusi ja seda, kuidas neid saab kasutada tõeliselt globaalse ja kontekstiteadliku disaini loomiseks.

Vaateakna ühikute piirangud

Enne kui süveneme konteineripäringu pikkusühikute spetsiifikasse, on oluline mõista, miks need vajalikud on. Vaateakna ühikud (vw, vh, vmin, vmax) defineerivad pikkused protsendina vaateaknast. Näiteks 1vw on 1% vaateakna laiusest ja 1vh on 1% vaateakna kõrgusest.

Kuigi need ühikud on tõhusad tervete paigutuste reageerivaks muutmisel, ei vasta need üksikute komponentide vajadustele. Kujutage ette navigeerimisriba, mis peab kohandama oma fondi suurust või vahesid oma vanemelemendi nav laiuse, mitte brauseriakna laiuse põhjal. Kui navigeerimisriba on paigutatud fikseeritud laiusega külgribale, tooks vw kasutamine fondi suuruse jaoks kaasa ebajärjekindla ja sageli vale skaleerimise vaateakna muutumisel. Komponendi sisemine paigutus võib muutuda liiga kitsaks või liiga avaraks, olenemata tegelikult sellele kättesaadavast ruumist.

See piirang muutub veelgi teravamaks keerukates, rahvusvahelistes kasutajaliidestes, kus komponendid võivad olla paigutatud erinevatesse paindlikesse paigutustesse, või kui tegeletakse erinevate ekraanisuuruste ja kuvasuhetega globaalse auditooriumi jaoks. Disainerid ja arendajad kasutavad sageli JavaScripti, et mõõta konteinerite mõõtmeid ja rakendada stiile dünaamiliselt, mis on vähem jõudlusvõimeline ja raskemini hooldatav.

Sissejuhatus CSS-i konteineripäringutesse ja pikkusühikutesse

CSS-i konteineripäringud, mis on kasutusele võetud @container reegliga, võimaldavad meil rakendada stiile elemendile selle lähima esivanema mõõtmete alusel, millel on määratletud konteineri kontekst (tavaliselt luuakse see container-type või container omaduse seadmisega). See paradigma muutus tähendab, et meie komponendid saavad nüüd reageerida oma vahetule ümbrusele, võimaldades uuel tasemel granulaarset kontrolli reageeriva disaini üle.

Selle konteineripõhise reageerivuse hõlbustamiseks on kasutusele võetud uus komplekt pikkusühikuid:

• cqw (konteineri laius): 1% konteineri reasisesest suurusest (inline size).
• cqh (konteineri kõrgus): 1% konteineri plokisuurusest (block size).
• cqi (konteineri reasisene suurus): samaväärne cqw-ga.
• cqb (konteineri plokisuurus): samaväärne cqh-ga.

Need ühikud on loodud analoogselt oma vaateakna vastetega (vw ja vh), kuid arvutatakse konteineri mõõtmete, mitte vaateakna mõõtmete suhtes.

"Reasisese" ja "plokisuuruse" mõistmine

Mõisted "reasisene" (inline) ja "plokisuurus" (block) on nende uute ühikute mõistmiseks fundamentaalsed. Need on abstraktsed, suunast sõltumatud terminid, mida kasutatakse CSS-i kirjutusviiside 3. taseme spetsifikatsioonis:

• Reasisene telg: telg, mida mööda tekst voolab. Horisontaalsetes kirjutusviisides (nagu eesti keel) on see laius. Vertikaalsetes kirjutusviisides (nagu traditsiooniline jaapani keel) on see kõrgus.
• Plokitelg: telg, mis on risti reasisese teljega. Horisontaalsetes kirjutusviisides on see kõrgus. Vertikaalsetes kirjutusviisides on see laius.

Seetõttu:

• cqi (konteineri reasisene suurus) viitab 1%-le konteineri mõõtmest piki reasisest telge. Eesti keele (horisontaalne kirjutusviis) puhul on see samaväärne 1%-ga konteineri laiusest.
• cqb (konteineri plokisuurus) viitab 1%-le konteineri mõõtmest piki plokitelge. Eesti keele puhul on see samaväärne 1%-ga konteineri kõrgusest.

Nende abstraktsete terminite kasutuselevõtt tagab, et konteineripäringu ühikud töötavad järjepidevalt erinevates kirjutusviisides ja tekstisuundades, mis on ülioluline globaalsete rakenduste jaoks, kus sisu võidakse kuvada erinevates keeltes ja orientatsioonides.

Konteineripäringu pikkusühikute arvutamine

Arvutus on lihtne:

• 1cqw = konteineri laius / 100
• 1cqh = konteineri kõrgus / 100
• 1cqi = konteineri reasisene suurus / 100 (horisontaalsetes kirjutusviisides samaväärne 1cqw-ga)
• 1cqb = konteineri plokisuurus / 100 (horisontaalsetes kirjutusviisides samaväärne 1cqh-ga)

Illustreerime seda näitega. Kui konteinerelemendi arvutatud laius on 500 pikslit ja arvutatud kõrgus on 300 pikslit:

• 10cqw oleks (500px / 100) * 10 = 50px.
• 25cqh oleks (300px / 100) * 25 = 75px.
• 50cqi oleks (500px / 100) * 50 = 250px.
• 100cqb oleks (300px / 100) * 100 = 300px.

Oluline on märkida, et need ühikud on dünaamilised. Kui konteineri mõõtmed muutuvad (nt suuruse muutmise sündmuse tõttu või paigutust mõjutava sisu lisamisel/eemaldamisel), arvutatakse kõik neid ühikuid kasutavad CSS-i omadused automaatselt ümber ja värskendatakse vastavalt.

Praktilised rakendused globaalses disainis

cqw, cqh, cqi ja cqb võimsus peitub nende võimes luua ülimalt kohanduvaid komponente, mis reageerivad oma vahetule kontekstile. See on rahvusvahelise veebiarenduse jaoks hindamatu väärtusega.

1. Tüpograafia erinevatele keeltele

Erinevatel keeltel on erinev tähemärkide laius ja lausete pikkus. Fondi suurus, mis sobib ideaalselt lühikese eestikeelse fraasi jaoks, võib olla liiga suur pika saksakeelse lause jaoks või liiga väike kompaktse Ida-Aasia tähemärgistiku jaoks samas komponendis. Konteineripäringu ühikute kasutamine font-size jaoks võimaldab tekstil sujuvalt skaleeruda vastavalt komponendis olevale horisontaalsele ruumile.

Näide: kaardikomponent, mis kuvab artiklite pealkirju.

            .card {
  container-type: inline-size;
  width: 300px; /* Näide: kaardi fikseeritud laius */
}

.card-title {
  font-size: 2.5cqw; /* Fondi suurus skaleerub kaardi laiusega */
  line-height: 1.4;
}

/* Näide: päring väiksemate kaartide jaoks */
@container (max-width: 200px) {
  .card-title {
    font-size: 3cqw; /* Kitsamate kaartide jaoks veidi suurem font loetavuse säilitamiseks */
  }
}

            

              
                Copy
              
            
          

Selle stsenaariumi korral, kui .card element on 300 pikslit lai, on pealkirja fondi suurus 2.5% 300 piklist, mis on 7.5px. Kui kaart kahaneb 200 pikslini, muutub fondi suurus 3% 200 piklist, mis on 6px. See tagab, et tekst jääb loetavaks ja proportsionaalseks kaardi piirides, kohandudes sujuvalt pikema või lühema tekstisisuga.

2. Vahede ja paigutuse kohandamine

Komponentide sees olevaid polsterdusi, marginaale ja vahesid saab dünaamiliselt kohandada. See on eriti kasulik elementide puhul nagu navigeerimismenüüd, vormiväljad või pildigaleriid, kus vahed peavad kohanema komponendi konteineri laiusega.

Näide: reageeriv navigeerimismenüü paindlikus külgribas.

            .sidebar {
  container-type: inline-size;
  width: 25%; /* Näide: külgriba võtab 25% vanema laiusest */
}

.nav-link {
  padding: 1cqw 1.5cqw; /* Polsterdus skaleerub külgriba laiusega */
  margin-bottom: 1cqw;
}

.nav-icon {
  width: 3cqw; /* Ikooni suurus on suhteline külgriba laiusega */
  height: auto;
}

            

              
                Copy
              
            
          

Kui külgriba laius muutub (võib-olla seetõttu, et põhisisu ala suurust muudetakse), kohanduvad navigeerimislinkide polsterdus ja ikoonide suurused automaatselt, säilitades ühtlase visuaalse hierarhia vastavalt olemasolevale ruumile.

3. Piltide ja meedia kuvasuhted

Kuigi kuvasuhte omadused ja sisemine suuruse määramine on võimsad, on mõnikord vaja, et meedia kohanduks otsesemalt oma konteineri mõõtmetega, eriti kui konteiner ise on reageerivuse peamine ajend.

Näide: kangelasepilt, mis peaks täitma oma konteineri laiuse, kuid säilitama selle laiuse suhtes kindla kuvasuhte.

            .hero-section {
  container-type: inline-size;
  width: 100%;
}

.hero-image {
  width: 100%;
  height: 50cqh; /* Pildi kõrgus on 50% kangelase sektsiooni kõrgusest */
  object-fit: cover;
}

            

              
                Copy
              
            
          

Siin tagab 50cqh, et pildi kõrgus on alati pool selle konteineri kõrgusest. Kui konteiner on kõrge ja kitsas, peegeldab pilt seda. Kui konteiner on madal ja lai, kohandub ka pilt. See on suurepärane globaalselt ühtlaste kangelasebännerite või taustapiltide jaoks.

4. Keerukate komponentide kohandamine (nt andmetabelid)

Andmetabelid on kurikuulsad oma reageerivuse väljakutsete poolest, eriti paljude veergude ja erinevate keelte puhul. Konteineripäringu ühikud aitavad hallata veergude laiuseid, fondi suurusi ja lahtrite polsterdust.

Näide: tabel, kus veergude laiused kohanduvad vastavalt tabeli üldlaiusele.

            .data-table-container {
  container-type: inline-size;
  overflow-x: auto; /* Oluline tabelite jaoks */
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.table-header,
.table-cell {
  padding: 1.5cqw;
  font-size: 1.2cqw;
}

/* Suhteliste laiuste määramine konkreetsetele veergudele */
.column-name {
  width: 25cqi; /* 25% tabeli konteineri reasisesest suurusest */
}

.column-value {
  width: 75cqi; /* 75% tabeli konteineri reasisesest suurusest */
}

            

              
                Copy
              
            
          

Selles näites on polsterdus, fondi suurused ja veergude laiused kõik määratletud suhtes .data-table-container-iga. Kui konteiner kitseneb või laieneb, kohandub tabeli sisemine paigutus proportsionaalselt, muutes selle loetavamaks erinevates murdepunktides ja erinevates piirkondades olevate kasutajate jaoks, kes võivad kokku puutuda erineva pikkusega andmetega.

5. Vertikaalsete kirjutusviiside käsitlemine

Rakenduste puhul, mis toetavad vertikaalseid kirjutusviise (nt traditsiooniline hiina, jaapani keel), muutub cqi ja cqb eristamine kriitiliselt oluliseks. Vertikaalses kirjutusviisis on reasisene telg vertikaalne ja plokitelg horisontaalne.

Vaatleme vertikaalset navigeerimismenüüd:

            body {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}

.vertical-nav {
  container-type: inline-size; /* Konteineri reasisene suurus on nüüd selle kõrgus */
  height: 100vh; /* Näide */
  width: 100px; /* Näide */
}

.nav-item {
  padding: 1cqi 2cqi; /* Polsterdus suhtes konteineri kõrgusega (reasisene suurus) */
  margin-bottom: 1cqi; /* Marginaal suhtes konteineri kõrgusega */
}

.nav-icon {
  width: auto; /* Automaatne laius */
  height: 3cqi; /* Ikooni kõrgus skaleerub konteineri kõrgusega */
}

            

              
                Copy
              
            
          

Selles seadistuses viitaks 1cqi 1%-le konteineri kõrgusest, samas kui 1cqw viitaks 1%-le konteineri laiusest. See tagab, et stiliseerimine jääb kontekstuaalselt korrektseks olenemata kirjutusviisist, mis on märkimisväärne eelis globaalsete rakenduste jaoks.

Brauseri tugi ja kaalutlused

Konteineripäringud, sealhulgas pikkusühikud, on suhteliselt uued, kuid on saavutanud laialdase brauseri toe. 2023. aasta lõpu ja 2024. aasta alguse seisuga pakuvad kaasaegsed brauserid nagu Chrome, Firefox, Safari ja Edge suurepärast tuge.

Olulised kaalutlused:

• Brauseri ühilduvus: Kontrollige alati uusimaid brauseri toe andmeid. Vanemate brauserite jaoks, mis ei toeta konteineripäringuid, vajate varustrateegiat, mis sageli hõlmab JavaScripti või lihtsamaid CSS-i meediapäringuid.
• container-type ja container-name: Konteineripäringu ühikute kasutamiseks peab vanemelement looma konteineri konteksti. Tavaliselt tehakse seda kasutades container-type: normal; (mis tähendab vaikimisi suuruse teljeks inline-size) või container-type: inline-size; või container-type: size;. Konteinereid saab ka nimetada, kasutades container-name-i, et sihtida konkreetseid esivanemaid.
• Jõudlus: Kuigi üldiselt jõudlusvõimeline, olge tähelepanelik liiga keeruliste arvutuste või liiga paljude dünaamilisest suuruse muutmisest sõltuvate elementide puhul. Enamikus tüüpilistes stsenaariumides pole jõudlus probleemiks.
• Varustrateegiad: Kasutage @supports päringuid, et kontrollida konteineripäringute tuge ja pakkuda vajadusel alternatiivseid stiile.

            .my-component {
  /* Varulahendus vanematele brauseritele */
  width: 100%;
  padding: 15px; /* Fikseeritud polsterdus */
  font-size: 16px; /* Fikseeritud fondi suurus */
}

@container (min-width: 500px) {
  @supports (container-type: inline-size) {
    .my-component {
      /* Konteineripäringu stiilid alistavad varulahendused */
      padding: 2cqw;
      font-size: 3cqw;
    }
  }
}

            

              
                Copy
              
            
          

CSS-i struktureerimine konteineripäringute jaoks

Levinud muster on määratleda konteineri kontekst vanemelemendil ja seejärel kasutada konteineripäringuid lastelementide stiliseerimiseks.

Muster 1: Reasisene konteineri suuruse määramine

See on kõige levinum kasutusjuht, kus komponendid kohanduvad oma laiuse põhjal.

            .component-wrapper {
  container-type: inline-size;
  width: 100%; /* Või mis tahes muu laius */
}

.component-content {
  font-size: 2cqw;
  padding: 1cqw;
}

@container (max-width: 400px) {
  .component-content {
    font-size: 3cqw;
    padding: 1.5cqw;
  }
}

            

              
                Copy
              
            
          

Muster 2: Plokisisene konteineri suuruse määramine

Kasulik elementidele, mis peavad kohanema oma kõrguse põhjal, näiteks kleepuvad päised või fikseeritud kõrgusega elemendid flex- või grid-paigutuses.

            .vertical-spacer {
  container-type: block-size;
  height: 50vh;
}

.vertical-content {
  margin-top: 5cqb;
}

            

              
                Copy
              
            
          

Muster 3: Kombineeritud suuruse määramine (kasutades size)

Kui teil on vaja viidata nii konteineri laiusele kui ka kõrgusele, kasutage container-type: size;.

            
.aspect-ratio-box {
  container-type: size;
  width: 100%;
  height: 300px;
}

.inner-element {
  width: 100%;
  /* Tee kõrguseks 50% konteineri laiusest, korrigeerituna 20% võrra selle kõrgusest */
  height: calc(50cqw + 20cqb);
}

            

              
                Copy
              
            
          

Lihtsast skaleerimisest kaugemale: täiustatud tehnikad

Tõeline võimsus ilmneb siis, kui kombineerite konteineripäringu ühikuid teiste CSS-i funktsioonidega, nagu calc(), clamp() ja meediapäringud.

1. calc() kasutamine konteineri ühikutega

Kombineerige konteineri ühikuid fikseeritud ühikute või muude suhteliste ühikutega nüansirikkama kontrolli saavutamiseks.

Näide: nupp, mis säilitab minimaalse polsterduse, kuid skaleerib oma fondi suurust.

            
.action-button {
  container-type: inline-size;
  display: inline-block;
  padding: 10px 2cqw; /* Fikseeritud vertikaalne polsterdus, dünaamiline horisontaalne polsterdus */
  font-size: clamp(14px, 2.5cqw, 20px); /* Piira fondi suurus vahemikku 14px ja 20px */
}

            

              
                Copy
              
            
          

2. Reageeriv disain globaalsetele komponentidele

Globaalsele publikule komponentide kujundamisel mõelge, kuidas erinevad sisupikkused, tähemärgistikud ja isegi kasutajaliidese eelistused võivad komponenti mõjutada. Konteineripäringud on teie liitlased.

• Mitmekeelne tugi: Veenduge, et tekst jääb loetavaks ja komponendid ei lähe katki pikemate või lühemate tõlgetega.
• Juurdepääsetavus: Kasutajate eelistusi teksti suuruse osas saab paremini arvesse võtta, kui komponendid skaleeruvad kontekstipõhiselt.
• Jõudluse optimeerimine: Piltide või keerukate graafikute puhul aitavad konteineripäringud tagada, et need mahuvad neile eraldatud ruumi ilma liigse laadimise või paigutuse nihketeta.

Kokkuvõte

CSS-i konteineripäringu pikkusühikud – cqw, cqh, cqi ja cqb – esindavad olulist hüpet edasi reageerivas veebidisainis. Võimaldades elemendipõhiseid ühikute arvutusi, annavad need arendajatele võimu luua ülimalt kohanduvaid komponente, mis reageerivad arukalt oma spetsiifilisele paigutuse kontekstile, mitte globaalsele vaateaknale.

Globaalse veebiarenduse jaoks on need ühikud asendamatud. Need võimaldavad robustsemat tüpograafia skaleerimist erinevates keeltes, paindlikke vahede kohandusi pesastatud paigutustes ja ühtlaseid kuvasuhteid meediale, austades samal ajal erinevaid kirjutusviise. Konteineripäringute ja nendega seotud pikkusühikute omaksvõtmine viib vastupidavamate, hooldatavamate ja kasutajasõbralikumate liidesteni publikule kogu maailmas.

Alustage nende ühikutega katsetamist oma järgmises projektis. Leiate, et need avavad uue kontrolli ja elegantsi taseme teie reageeriva disaini töövoogudes, muutes teie veebisaidid tõeliselt kohanduvaks igale konteinerile, kõikjal maailmas.